const info = {
  title: '手机',
  price: '100.00',
  size: ['iPhone12', 'iPhone12 pro', '...'],
  colord: ['银色', '金色', '黑色'],
  children: [
    {
      id: 1,
      img: '../images/detailsimg/infolist/1_60x60.jpg',
      small_img: '../images/detailsimg/infolist/1_400x400.jpg',
      big_img: '../images/detailsimg/infolist/1_800x800.jpg'
    },
    {
      id: 2,
      img: '../images/detailsimg/infolist/2_60x60.jpg',
      small_img: '../images/detailsimg/infolist/2_400x400.jpg',
      big_img: '../images/detailsimg/infolist/2_800x800.jpg'
    },
	{
	  id: 3,
	  img: '../images/detailsimg/infolist/3_60x60.jpg',
	  small_img: '../images/detailsimg/infolist/3_400x400.jpg',
	  big_img: '../images/detailsimg/infolist/3_800x800.jpg'
	},
	{
	  id: 4,
	  img: '../images/detailsimg/infolist/4_60x60.jpg',
	  small_img: '../images/detailsimg/infolist/4_400x400.jpg',
	  big_img: '../images/detailsimg/infolist/4_800x800.jpg'
	},
	{
	  id: 5,
	  img: '../images/detailsimg/infolist/5_60x60.jpg',
	  small_img: '../images/detailsimg/infolist/5_400x400.jpg',
	  big_img: '../images/detailsimg/infolist/5_800x800.jpg'
	},
	{
	  id: 6,
	  img: '../images/detailsimg/infolist/6_60x60.jpg',
	  small_img: '../images/detailsimg/infolist/6_400x400.jpg',
	  big_img: '../images/detailsimg/infolist/6_800x800.jpg'
	},
  ]
}

const box = document.querySelector('.box')
box.innerHTML = `
  <!-- 展示图片盒子 -->
  <div class="show">
    <img src="${ info.children[0].small_img }" alt="">

    <!-- 遮罩层盒子 -->
    <div class="mask"></div>
  </div>
<div class="title">图片列表</div>
  <!-- 切换列表盒子 -->
  <div class="list">
    <p class="active">
      <img
        src="${ info.children[0].small_img }"
        data-show="${ info.children[0].small_img }"
        data-enlarge="${ info.children[0].big_img }"
        alt="">
    </p>
	<p class="active">
	  <img
	    src="${ info.children[1].small_img }"
	    data-show="${ info.children[1].small_img }"
	    data-enlarge="${ info.children[1].big_img }"
	    alt="">
	</p>
	<p class="active">
	  <img
	    src="${ info.children[2].small_img }"
	    data-show="${ info.children[2].small_img }"
	    data-enlarge="${ info.children[2].big_img }"
	    alt="">
	</p>
	<p class="active">
	  <img
	    src="${ info.children[3].small_img }"
	    data-show="${ info.children[3].small_img }"
	    data-enlarge="${ info.children[3].big_img }"
	    alt="">
	</p>
	<p class="active">
	  <img
	    src="${ info.children[4].small_img }"
	    data-show="${ info.children[4].small_img }"
	    data-enlarge="${ info.children[4].big_img }"
	    alt="">
	</p>
	<p class="active">
	  <img
	    src="${ info.children[5].small_img }"
	    data-show="${ info.children[5].small_img }"
	    data-enlarge="${ info.children[5].big_img }"
	    alt="">
	</p>
    </div>
    <div class="bottom">
		<div class="tips">
			<img src="img/img/star_.png" >
			收藏宝贝
					  	
		</div>
		<div class="tips">
			<img src="img/img/star_.png" >
			商品侵权投诉
					  	
		</div>
				  	
	</div>
    <!-- 放大镜盒子 -->
    <div class="enlarge" style="background-image: url(${ info.children[0].big_img })"></div>
  </div>
`

class Enlarge {
  constructor (select) {
    // 有一些内容
    // 0. 范围元素
    this.ele = document.querySelector(select)
    // 1. 遮罩层盒子
    this.mask = this.ele.querySelector('.mask')
    // 2. 放大图片的盒子
    this.enlarge = this.ele.querySelector('.enlarge')
    // 3. 列表盒子
    this.list = this.ele.querySelector('.list')
    // 4. 展示图片盒子
    this.show = this.ele.querySelector('.show')
    // 5. show 盒子的尺寸
    this.show_width = this.show.clientWidth
    this.show_height = this.show.clientHeight
    // 6. mask 盒子的尺寸
    // 获取非行内样式
    this.mask_width = parseInt(window.getComputedStyle(this.mask).width)
    this.mask_height = parseInt(window.getComputedStyle(this.mask).height)
    // 7. 背景图片尺寸
    // 获取 backgroundSize 样式
    this.bg_width = parseInt(window.getComputedStyle(this.enlarge).backgroundSize.split(' ')[0])
    this.bg_height = parseInt(window.getComputedStyle(this.enlarge).backgroundSize.split(' ')[1])

    // 调用启动器就可以了
    // 目的: 不是为了延时启动
    //       是为了你启动整个放大镜功能可以依靠一个方法完成
    this.init()
  }

  // 原型上的方法
  // 0. 启动器
  init () {
    // 去调用所有的方法
    this.setScale()
    this.overOut()
    this.move()
    this.listChange()
  }

  // 1. 调整尺寸
  /*
    一共有四个尺寸
      => 需要: mask尺寸 / show尺寸 === enlarge尺寸 / 背景图的尺寸
        mask 尺寸     enlarge 尺寸
      ------------ = ------------
        show 尺寸      背景图尺寸
      enlarge 尺寸 * show 尺寸 = mask 尺寸 * 背景图尺寸
      enlarge 尺寸 = mask 尺寸 * 背景图尺寸 / show 尺寸

  */
  setScale () {
    // 求出 enlarge 盒子应该的尺寸
    this.enlarge_width = this.mask_width * this.bg_width / this.show_width
    this.enlarge_height = this.mask_height * this.bg_height / this.show_height

    // 直接给 enlarge 盒子进行赋值
    this.enlarge.style.width = this.enlarge_width + 'px'
    this.enlarge.style.height = this.enlarge_height + 'px'
  }

  // 2. 移入移出
  /*
    移入 this.show 盒子 的时候, mask 和 enlarge 显示
    移出 this.show 盒子 的时候, mask 和 enlarge 隐藏
  */
  overOut () {
    // 2-1. 移入事件
    this.show.addEventListener('mouseover', () => {
      this.mask.style.display = 'block'
      this.enlarge.style.display = 'block'
	  console.log("鼠标移入")
    })

    // 2-2. 移出事件
    this.show.addEventListener('mouseout', () => {
      this.mask.style.display = 'none'
      this.enlarge.style.display = 'none'
    })
  }

  // 3. 移动联动
  /*
    给 this.show 绑定一个鼠标移动事件
    获取光标坐标点
    问题: 哪一组 ?
      => offset: 相对于 事件目标 的左上角的坐标位置
      => 因为你的 mask 就是根据 show 定位的
      => 因为 mask 有可能作为事件目标, 导致坐标不准确
      => 最好是穿透
    边界值判断
    移动比例
      enlarge 移动距离        enlarge 盒子尺寸
      --------------   ===  -----------------
      mask 盒子移动距离        mask 盒子尺寸
      enlarge 移动距离 * mask 盒子尺寸 = enlarge 盒子尺寸 * mask 盒子移动距离
      enlarge 移动距离 = enlarge 盒子尺寸 * mask 盒子移动距离 / mask 盒子尺寸
  */
  move () {
    // 3-1. 绑定事件
    this.show.addEventListener('mousemove', e => {
      e = e || window.event

      // 3-2. 获取坐标点
      let x = e.offsetX - this.mask_width / 2
      let y = e.offsetY - this.mask_height / 2

      // 3-3. 边界值判断
      if (x <= 0) x = 0
      if (y <= 0) y = 0
      if (x >= this.show_width - this.mask_width) x = this.show_width - this.mask_width
      if (y >= this.show_height - this.mask_height) y = this.show_height - this.mask_height

      // 3-4. 给元素进行赋值
      this.mask.style.left = x + 'px'
      this.mask.style.top = y + 'px'

      // 3-5. 根据比例计算出一个 背景图 的移动尺寸
      // 公式: enlarge 移动距离 = enlarge 盒子尺寸 * mask 盒子移动距离 / mask 盒子尺寸
      const bg_x = this.enlarge_width * x / this.mask_width
      const bg_y = this.enlarge_height * y / this.mask_height

      // 3-6. 给 this.enlarge 的 backgroundPosition 赋值
      this.enlarge.style.backgroundPosition = `-${ bg_x }px -${ bg_y }px`
    })

  }

  // 4. 列表切换
  /*
    点击切换, 就是选项卡逻辑
    问题: 给谁 绑定 什么事件 ?
      => 应该是点击 p 或者 img 的时候触发
      => 因为页面是渲染的, 并且元素不固定
      => 最好做一个事件委托
      => 我获取的时候, 已经获取的 this.list, 不需要在单独获取 p 标签
    问题: 事件委托内判断的的 nodeName 应该是什么 ?
      => 其实你真实点击的应该是 img 标签
      => 因为你切换类名, 切换的是 p, 最好能让 p 元素去 捕获
        -> 穿透, 当你点击在 img 身上的时候, 直接穿过去
        -> 需要给 img 标签设置一个 pointer-events: none;
      => 又因为你切换 src 属性, 切换的是 img, 最好能让 img 标签捕获
  */
  listChange () {
    // 4-1. 给 this.list 绑定点击事件, 进行事件委托
    this.list.addEventListener('click', e => {

      // this => list
      // 你在这里函数内需要操作的是谁 ?
      //   实例对象身上的 show
      //   实例对象身上的 enlarge
      //   实例对象身上的 list 里面的 p
      // 如果这里的 this 不是 实例, 你能写 this.show 吗
      // 需要让这里的 this 指向 实例, 才能写 this.show
      // 因为你写成了 function () {} 的形式, 导致这里的 this 是 list 了
      // 当你写成 () => {}, 内部是没有 this 的
      // this 就是外部作用域的 this
      // 外部作用域就是 listChange 函数
      // listChange 函数内 this 是 实例
      // 你写成 () => {} 这里的 this 就是 实例

      e = e || window.event
      const target = e.target || e.srcElement

      // 判断点击了
      if (target.nodeName === 'IMG') {
        // 拿到你需要切换的图片路径
        // 我们可以把该选项需要切换的图片以自定义属性的形式书写在标签上
        // 拿到你点击的这个 img 标签身上的自定义属性
        const showUrl = target.dataset.show
        const enlargeUrl = target.dataset.enlarge

        // 对不同的标签进行赋值
        // showUrl 赋值给谁 ?
        //   this.show 下得 img 标签
        this.show.firstElementChild.src = showUrl
        // enlargeUrl 赋值给谁 ?
        //   this.enlarge 的 背景图皮 样式
        this.enlarge.style.backgroundImage = `url(${ enlargeUrl })`

        // 切换 p 标签的类名
        // 你点击的这个元素的父元素去添加类名
        for (let i = 0; i < this.list.children.length; i++) {
          this.list.children[i].classList.remove('active')
        }
        target.parentElement.classList.add('active')
      }
    })
  }
}
